<template>
	<view class="content">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{height: statusBarHeight+'px'}">
		</view>
		
		<!-- LOGO -->
		<image 
			mode="widthFix"
			src="/static/img/logo.png" class="logo"></image>
		
		<!-- 手机号输入框 -->
		<view class="input-group">
			<uni-icons color="#009900" type="phone-filled" size="24">
			</uni-icons>
			<input v-model="phone" placeholder="请输入手机号"/>
			<uni-icons color="#1296db" type="clear" size="24">
			</uni-icons>
		</view>

		<!-- 密码输入框 -->
		<view class="input-group">
			<uni-icons color="#009900" type="locked-filled" size="24">
			</uni-icons>
			<input v-model="pwd" password placeholder="请输入密码"/>
			<uni-icons color="#1296db" type="eye-slash-filled" size="24">
			</uni-icons>
		</view>
		
		<!-- 提交按钮 -->
		<button class="btn" @click="login">登 录</button>

		<!-- 找回密码 -->
		<navigator class="feepay" open-type="switchTab" url="../index/index">
			忘记密码？
		</navigator>
		
		<!-- 
		<uni-icons color="#009900" type="contact" size="30">
		</uni-icons>
		
		<input type="text" placeholder="text文本框"/>
		<input type="digit" placeholder="digit文本框"/>
		<input type="idcard" placeholder="idcard文本框"/>
		<input type="number" placeholder="number文本框"/>
		<input password type="safe-password" placeholder="safe-password文本框"/>
		 -->
		
	</view>
</template>

<script>
	import { userlogin } from '../../service/index.js'
	
	export default {
		data() {
			return {
				statusBarHeight: 0,
				phone: '13501234567',
				pwd: '123456'
			}
		},
		// 生命周期方法
		onLoad() {
			// 获取手机系统信息
			let { statusBarHeight } = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			console.log('Login onLoad...')
		},
		onShow(){console.log('Login onShow...')},
		onReady(){console.log('Login onReady...')},
		onHide(){console.log('Login onHide...')},
		onUnload(){console.log('Login onLoad...')},
		
		methods: {
			/* 执行登录业务 */
			async login(){
				//console.log('当前输入：',this.phone, this.pwd)
				//1.验证手机号是否合法，不合法就弹出提示框，退出执行
				if(!/^1[3-9]\d{9}$/.test(this.phone)){
					uni.showToast({
						title: '手机号非法',		//提示标题
						icon: 'none',			//图标
						duration: 3000			//持续时长 
					})
					return
				}
				//2.验证密码是否合法，不合法就弹出提示框，退出执行
				if(this.pwd.length < 6){
					uni.showToast({
						title:'密码格式非法',
						icon: 'none',
						duration: 3000
					})
					return 
				}
				
				// 发送http post请求，执行登录业务
				let data = await userlogin(this.phone, this.pwd)
				// console.log(data)
				if(data.code==2000){ // 登录成功
					// data的结构：  {code:2000, msg:'ok', token:'s980fgsf'}
					// 将data.token字符串存入storage
					uni.setStorageSync('userToken', data.token)
					//从客户端缓存中试着读取“登录原因页”
					let loginReason = uni.getStorageSync('loginReasonPage')
					if(loginReason){		//找到了“登录原因页”
						uni.removeStorageSync('loginReasonPage')//从客户端缓存中删除“登录原因页”
						uni.redirectTo({
							url:loginReason
						})
					}else {							//没有找到“登录原因页”
						uni.switchTab({
							url: "/pages/index/index"
						})						
					}
					
					// uni.navigateTo({ })  保留当前页，创建目标页 跳过去
					// uni.switchTab({ }) 跳转到tabbar页面   销毁所有非tabbar页面
					// 弹出吐司消息，登录成功
					// uni.showToast({
					// 	duration:2000,
					// 	icon:'none',
					// 	title:"登录成功",
					// 	position: "bottom",
					// 	success: ()=>{
					// 		console.log('toast弹窗success')
					// 	},
					// 	fail: ()=>{
					// 		console.log('toast弹窗fail')
					// 	},
					// 	complete: ()=>{
					// 		console.log('toast弹窗complete')

					// 	}
					// })

				}else if(data.code==4003){ // 账号或密码输入错误
					uni.showModal({
							title: "提示",
							content: "账号或密码输入错误",
							showCancel: false
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.status-bar {
		position: fixed;
		width: 100%;
		background-color: $zh-theme-color;
	}
	.logo {
		width: 450rpx;
		margin-top: $uni-spacing-col-lg*6;
		margin-bottom: $uni-spacing-col-lg*4;
	}
	.content {
		align-items: center;
		height: 100vh;
		background-color: $uni-bg-color;
	}
	
	/* 输入框的样式 */
	.input-group {
		
		border: 1px solid $zh-theme-color;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		display: flex;
		align-items: center;
		width: 700rpx;
		margin-bottom: $uni-spacing-col-base*2;
		border-radius: 5px;
		
		input {
			flex: 1;
			font-size: $uni-font-size-base;
			margin: 0px $uni-spacing-row-base;
		}
	}
	
	/* 提交按钮 */ 
	.btn {
		width: 700rpx;
		background-color: $zh-theme-color;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-base;
		//SCSS函数：darken(颜色, 百分比)，返回一个更深的颜色值
		//SCSS函数：lighten(颜色, 百分比)，返回一个更浅的颜色值
		&:active {
			background-color: darken($zh-theme-color, 5%);
		}

	}
	
	/* 找回密码 */
	.feepay {
		font-size: $uni-font-size-sm;
		color: $zh-theme-color;
		margin-top: $uni-spacing-col-lg*2;
	}
	
</style>
